<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse"
             yunique-opened :router="false" background-color="#545c64"
             text-color="#fff"
             active-text-color="#545c64">
      <template v-for="(item,index) in items">
        <template v-if="item.subs">
          <el-menu-item :index="item.index" :key="item.index">
            <div class="router-div router-first" @click="click($event,index)">
              <i :class="item.icon" :style="'font-size:'+fontsize+'px!important; padding-right:5px'"></i>
              <!-- <svg-icon :icon-class="item.icon" class-name="icon" size="50"></svg-icon> -->
              <span>{{ item.title }}</span>
              <div class="item-list clearfix" v-show="ishow && showIndwx ==index" ref="itemList">
                <div class="subitem">
                  <template v-for="subItem in item.subs">
                    <template v-if="subItem.subs">
                      <dl class="fore1">
                        <dt><a href="#">{{ subItem.title }}</a></dt>
                        <dd>
                          <template v-for="threeItem in subItem.subs">
                            <template v-if="!threeItem.subs">
                              <em>
                                <router-link :to="threeItem.path">{{
                                    threeItem.title
                                  }}
                                </router-link>
                              </em>
                            </template>
                          </template>
                          <!--                                            <em  v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">-->
                          <!--                                                  <a href="#">{{ threeItem.title }}</a>-->
                          <!--                                            </em>-->
                        </dd>
                      </dl>
                    </template>
                  </template>
                  <dl class="fore2">
                    <dt><a href="#">{{ item.title }}</a></dt>
                    <dd>
                      <template v-for="subItem2 in item.subs">
                        <template v-if="!subItem2.subs">
                          <em>
                            <router-link :to="subItem2.path">{{ subItem2.title }}
                            </router-link>
                          </em>
                        </template>
                      </template>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </el-menu-item>

        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <router-link v-if="!collapse" :to="item.path">
              <div class="router-div router-first"><i :class="item.icon"
                                                      :style="'font-size:'+fontsize+'px!important; padding-right:5px'"></i><span>{{
                  item.title
                }}</span>
              </div>
            </router-link>
            <div class="router-div router-first" @mouseout="out($event,index)"><i :class="item.icon"
                                                                                  :style="'font-size:'+fontsize+'px!important; padding-right:5px'"></i><span>{{
                item.title
              }}</span>
              <div class="item-list clearfix" v-show="ishow && showIndwx ==index" ref="itemList">
              </div>
            </div>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import {Loading} from 'element-ui';
import bus from '../../config/bus';
import menu from '../../config/menu-config.js';
// import {getMenus} from "@/config/api";

export default {
  data() {
    return {
      collapse: false,
      items: [],
      ishow: false,
      showIndwx: 0,
      fontsize: 24
    }
  },
  watch: {
    collapse: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.fontsize = 24;
        } else {
          this.fontsize = 20;
        }
        console.log(this.fontsize);
      }
    }
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace('/', '');
    }
  },
  created() {
    let loadingInstance1 = Loading.service({fullscreen: true});
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on('collapse', msg => {
      this.collapse = msg;
    })
    this.items = menu;
    loadingInstance1.close();
    // getMenus().then(res => {
    //   this.items = res.data.data;
    //   loadingInstance1.close();
    // });

  },
  methods: {
    out(event, index) {
      // this.ishow = false;
      // this.showIndwx = index;
    },
    click(event, index) {
      if (!this.ishow) {
        this.ishow = true;
        this.showIndwx = index;
        let clientHeight = document.body.clientHeight;
        let top = event.currentTarget.getBoundingClientRect().top;
        this.$refs.itemList[index].style.top = top + "px";
        // this.$refs.itemList[index].style.left
        if (this.collapse) {
          this.$refs.itemList[index].style.left = "60px";
        } else {
          this.$refs.itemList[index].style.left = "200px";
        }
        setTimeout(() => {
          let itemHeight = this.$refs.itemList[index].clientHeight;
          if (top + itemHeight > clientHeight) {
            top = clientHeight - itemHeight;
          }
          this.$refs.itemList[index].style.top = top + "px";
        });

      } else if (this.ishow && this.showIndwx == index) {

        this.ishow = false;
      } else {
        this.showIndwx = index;
        let clientHeight = document.body.clientHeight;
        let top = event.currentTarget.getBoundingClientRect().top;
        this.$refs.itemList[index].style.top = top + "px";
        // this.$refs.itemList[index].style.left
        if (this.collapse) {
          this.$refs.itemList[index].style.left = "60px";
        } else {
          this.$refs.itemList[index].style.left = "200px";
        }
        setTimeout(() => {
          let itemHeight = this.$refs.itemList[index].clientHeight;
          if (top + itemHeight > clientHeight) {
            top = clientHeight - itemHeight;
          }
          this.$refs.itemList[index].style.top = top + "px";
        });
      }

    }
  }
}
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 0;
  overflow-y: scroll;
  width: 200px;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 200px;
}

.sidebar > ul {
  height: 100%;
}

.el-submenu__title i {
  color: #FFF;
}

.el-menu-item i {
  color: #FFF;
}

.router-div {
  width: 115px;
  height: 56px;
  margin-left: -45px;
  padding: 0 45px 0 40px;
}

.router-first {
  margin-left: -40px;
}

.is-active {
  background-color: #FFF !important;
  color: #545c64 !important;
}

</style>
